<template>
     
    <div>
        <input type="text" v-model="state.Mname">
        <input type="text" v-model="state.Mphone">
        <input type="button" value="查询" @click="funShowMember" >
       <table>
        <tr>
        <td>编号</td>
        <td>名称</td>
        <td>电话</td>
        <td>图片</td>
        <td>时间</td>
        <td>地址</td>
        <td>操作</td>
        </tr>
        <tr v-for="item in list">
        <td>{{ item.mid }}</td>
        <td>{{ item.mname }}</td>
        <td>{{ item.mphone }}</td>
        <td>
            <img :src="'../src/views/iamge/屏幕截图 2024-08-24 112728.png'  " />
        </td>
        <td>{{ item.mdatetime.substr(0,10) }}</td>
        <td>{{ item.mdizhi }}</td>
        <td>
             <input type="button" value="删除" @click="shan(item.mid)">
            </td>
        </tr>
       </table>
      <a>当前第1页共1页每页显示  <input type="button" value="上一页" > <input type="button" value="下一页" > <input type="button" value="首页" > <input type="button" value="尾页" ></a>
    </div>
</template>

<script setup lang="ts">
import {reactive, toRefs, onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()

const data:any = reactive({

    state:{
        Mname:'',
        Mphone:''
    },

    list:[]
  

})

const {state,list} = toRefs(data)


 
onMounted(()=>{
   
   funShowMember()

})


const funShowMember = ()=>{
    axios({
        url:'https://localhost:7239/api/Member/ShowMember',
        method:'get',
        params:state.value
    }).then((res)=>{
        list.value = res.data.data

        
    })
}



const shan = (mid:number)=>{
    if(confirm('确定删除吗？'))
    {
        axios({
        url:'https://localhost:7239/api/Member/DeleteMember',
        method:'get',
        params:{
            Mid:mid
        }
    }).then((res)=>{
        if(res.data.data>0)
        {
            alert('删除成功')
            funShowMember()
        }
        else
        {
            alert('删除失败')
        }
       
    })
    }
   
}

</script>

<style scoped>

</style>